<template>
  <div>
    <VForm
      ref="formRef"
      :model="model"
      :fieldList="fieldList"
      :rules="rules"
      :options="formOption"
      :originOption="allOptions"
    >
      <template #warehouse="{ input, value }">
        <WarehouseSelect
          multiple
          @update:model-value="input"
          :model-value="value"
          collapse-tags-tooltip
          collapse-tags
        />
      </template>
    </VForm>
  </div>
</template>
<script setup lang="jsx">
import VForm from "@/components/Form/index.vue";
import WarehouseSelect from "@/components/WarehouseSelect/index.vue";
import { logisticsAddress } from "../../../api";
import { getDateRangeForNext100Years } from "@/utils/index";
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
});

const emit = defineEmits([
  "update:throwingWeight",
  "update:deliverMode",
  "update:billingType",
]);

const formRef = ref();
const model = ref({
  time: getDateRangeForNext100Years(),
});
const originOption = reactive({ collect_name: [] });

const allOptions = computed(() =>
  Object.assign({}, originOption, props.options || {})
);
watch(
  () => props.data,
  async (val) => {
    if (val.logistics_id) {
      const {
        logistics_id,
        channel_code,
        channel_name,
        channel_en_name,
        channel_attrs,
        billing_type,
        time,
        collect_name,
        warehouse,
        transport_type,
        delivery_mode,
        agent,
        contact,
        pickup_address,
        has_tax,
        is_cabinet,
        start_time,
        end_time,
      } = val;
      await getAddress(logistics_id);
      handleChangeBillingType(billing_type);
      handleChangeDeliverMode(delivery_mode);
      model.value = {
        logistics_id,
        channel_code,
        channel_name,
        channel_en_name,
        channel_attrs,
        billing_type,
        collect_name,
        warehouse,
        transport_type,
        delivery_mode,
        agent,
        contact,
        pickup_address,
        has_tax,
        is_cabinet,
        time: [start_time, end_time],
      };
    }
  }
);

const handleChangeLogistics = (e) => {
  getAddress(e);
};

const getAddress = async (logistics_id) => {
  const formValues = await formRef.value.getFormValues();
  try {
    if (!logistics_id) return;
    const { data } = await logisticsAddress({ logistics_id });
    originOption["pickup_address"] = data;
  } catch (e) {
    originOption["pickup_address"] = [];
    console.error(e);
  } finally {
    model.value = Object.assign({}, formValues, {
      pickup_address: "",
    });
  }
};

const handleChangeBillingType = (e) => {
  // 起重续价 区间续价
  emit("update:throwingWeight", [1, 2].includes(+e));
  emit("update:billingType", e);
};

const handleChangeDeliverMode = (e) => {
  emit("update:deliverMode", e);
};

const publicStyle = { style: { width: "360px" } };
const inputProps = { itemProps: { maxLength: 200 } };
const fieldList = [
  { label: "基础信息", type: "title" },
  {
    field: "logistics_id",
    label: "物流商",
    ...publicStyle,
    ...inputProps,
    type: "select",
    origin: "map.logistics",
    options: {
      labelKey: "logistics_name",
      valueKey: "logistics_id",
    },
    itemProps: {
      onChange: handleChangeLogistics,
    },
  },
  {
    field: "channel_code",
    label: "渠道代码",
    ...publicStyle,
    ...inputProps,
  },
  { type: "br" },
  {
    field: "channel_name",
    label: "渠道中文名称",
    ...publicStyle,
    ...inputProps,
  },

  {
    field: "channel_en_name",
    label: "渠道英文名称",
    style: { width: "360px" },
    itemProps: { maxLength: 200 },
  },
  { type: "br" },
  {
    field: "channel_attrs",
    label: "渠道属性",
    ...inputProps,
    ...publicStyle,
    type: "select",
    originField: "logisticsAttributes",
    multiple: true,
    itemProps: {
      "collapse-tags": true,
      "collapse-tags-tooltip": true,
    },
  },
  {
    field: "billing_type",
    label: "计费类型",
    type: "select",
    originField: "billing_type",
    ...publicStyle,
    ...inputProps,
    itemProps: {
      onChange: handleChangeBillingType,
    },
  },
  { type: "br" },
  {
    field: "time",
    label: "开始时间/结束时间",
    style: { width: "140px" },
    type: "dateTimeRange",
    ...publicStyle,
    ...inputProps,
  },
  { type: "br" },
  {
    field: "collect_name",
    label: "揽收商",
    ...publicStyle,
    ...inputProps,
  },
  {
    field: "warehouse",
    label: "适用发货仓库",
    style: { width: "582px" },
    ...inputProps,
    type: "select",
    multiple: true,
    slot: "warehouse",
    // TODO 仓库
    default: `<div class='text-[12px] text-[#999] leading-[17px] ml-[8px] w-[180px]'>绑定仓库后，表示此仓库可以使用此运输方式</div>`,
  },
  { type: "br" },
  {
    field: "transport_type",
    label: "运输方式",
    style: { width: "208px" },
    type: "select",
    originField: "transport_type",
    ...publicStyle,
    ...inputProps,
  },
  {
    field: "delivery_mode",
    label: "设置优选类型",
    type: "select",
    originField: "delivery_mode",
    default: `<div class='text-[12px] text-[#999] leading-[17px] ml-[8px] w-[220px]'>此功能用于区分尾程优选和头程优选类型</div>`,
    ...publicStyle,
    ...inputProps,
    itemProps: {
      onChange: handleChangeDeliverMode,
    },
  },
  { type: "br" },
  {
    field: "agent",
    label: "代理人",
    ...publicStyle,
    ...inputProps,
  },
  {
    field: "contact",
    label: "联系方式",
    ...publicStyle,
    ...inputProps,
  },
  { type: "br" },
  {
    field: "pickup_address",
    label: "提货地",
    ...publicStyle,
    ...inputProps,
    originField: "pickup_address",
    type: "select",
    options: {
      valueKey: "logistics_address_id",
      labelKey: "address_name",
    },
  },
  {
    field: "has_tax",
    label: "是否包税",
    type: "select",
    originField: "has_tax",
    style: { width: "140px" },
    ...inputProps,
     show: ({ model }) => model.delivery_mode==2,
  },
  {
    field: "is_cabinet",
    label: "是否整柜",
    type: "select",
    originField: "is_cabinet",
    style: { width: "140px" },
    ...inputProps,
     show: ({ model }) => model.delivery_mode==2,
  },
];

const rules = reactive({
  logistics_id: [{ required: true, message: "请选择物流商", trigger: "blur" }],
  channel_name: [
    { required: true, message: "请输入渠道中文名称", trigger: "blur" },
  ],
  channel_en_name: [
    { required: true, message: "请输入渠道英文名称", trigger: "blur" },
  ],
  channel_attrs: [
    { required: true, message: "请选择渠道属性", trigger: "blur" },
  ],
  billing_type: [
    { required: true, message: "请选择计费类型", trigger: "blur" },
  ],
  collect_name: [{ required: true, message: "请输入揽收商", trigger: "blur" }],
  warehouse: [
    { required: true, message: "请选择适用发货仓库", trigger: "blur" },
  ],
  transport_type: [
    { required: true, message: "请选择运输方式", trigger: "blur" },
  ],
  delivery_mode: [
    { required: true, message: "请选择优选类型", trigger: "blur" },
  ],
  channel_code: [
    { required: true, message: "请输入渠道代码", trigger: "blur" },
  ],
  has_tax: [{ required: true, message: "请选择是否包税", trigger: "blur" }],
  is_cabinet: [{ required: true, message: "请选择是否整柜", trigger: "blur" }],
});

const formOption = {
  inline: true,
  labelPosition: "top",
};

defineExpose({ formRef });
</script>
